<template>
  <view>
    <div class="title">
      公司动态
    </div>
    <div class="list-container" @scroll="handleScroll">
      <ul>
        <template  v-for="(item,index) in list" :key="item.id">
          <template v-if="index % 2 == 0">
            <li class="list_left" @click="toPath('/article/detail?id='+item['id'])">
              <img :src="item['thumbnail']">
              <span>{{item.title}}</span>
            </li>
          </template>
          <template v-else>
            <li class="list_right" @click="toPath('/article/detail?id='+item['id'])">
              <img :src="item['thumbnail']">
              <span>{{item.title}}</span>
            </li>
          </template>

        </template>

      </ul>
      <div v-if="isLoading" class="loader">Loading...</div>
    </div>
  </view>
</template>
<script>
 export default {
   data(){
     return {
       isLoading:false,
       search:{
         keyword:"",
         category_id1:2,
         page:0,
         limit:20,
         last_page:1,
       },
       list:[

       ]
     }

   },
   methods:{
     handleScroll(event) {
       const { scrollTop, scrollHeight, clientHeight, scrollLeft, offsetWidth,scrollWidth } = event.target;
       if (scrollTop + clientHeight >= scrollHeight - 5) { // 5px 的缓冲区
         this.getArticleList(2)
       }
     },
     getArticleList(type = 1){
       if(this.search.page > this.search.last_page){
         return false;
       }
       this.search.page += 1;
       this.isLoading = true
       let that = this
       this.$get("/api/article/page",this.search).then(res=>{
         if(res.code == 10000){
           if(type == 1){
             that.list = [];
             that.search.page = 1;
           }
           that.search.last_page = res.result.last_page;
           for(let x in res.result.data){
             that.list.push(res.result.data[x])
           }
           this.isLoading = false;
         }
       }).catch(err=>{

       })
     }
   },
   created() {
     this.getArticleList(1)
   }
 }
</script>

<style >
.title{
  float: left;
  width: 100%;
  margin-top: 30px;
  text-align: center;
  font-size: 40px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
}
ul{
  margin: 0;
  padding: 0;

}
li{
  list-style: none;
}
.list-container {
  float: left;
  height: 90vh; /* 设置列表容器的高度 */
  overflow-y: auto;
  position: relative;
  width: 100vw;
}
.loader {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.list_left{
  float: left;
  width: 48%;
  margin-top: 30px;
  margin-left: 1%;
}
.list_left > img{
  float: left;
  width: 100%;
}
.list_left > span{
  float: left;
  width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 28px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-align: center;
}
.list_right{
  float: right;
  width: 48%;
  margin-top: 30px;
  margin-right: 1%;
}
.list_right > img{
  float: left;
  width: 100%;
}

.list_right > span{
  float: left;
  width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 28px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-align: center;
}
</style>